<!doctype html>
<html lang="en" ng-app="tinywan">
<head>
    <meta charset="UTF-8">
    <title>通过ng-class动态改变样式类实例操作,通过ng-class动态改变样式类实例操作</title>
    <script type="text/javascript" src="__PUBLIC__/Common/static/angular/angular.min.js"></script>
    <style type="text/css">
        .font{
            font-size:32px;
        }
        .lock{
            background: #dcdcdc;
        }
        .red{
            font-size: 18px;
            background: orangered;
        }
        .green{
            background: green;
        }
    </style>
</head>
<body>
<div ng-controller="ctrl">
    <div ng-class="{red:true,font:true}">red:true angular_ng_class</div>
    <div ng-class="{red:false,font:true}">red:false angular_ng_class</div>
    <hr/>
    <table width="400" border="4">
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>LoginIP</td>
        </tr>
        <tr ng-repeat="v in data" ng-class="{lock:v.status==0}">
            <td>{{v.user_id}}</td>
            <td ng-class="{red:v.parent_id==2}">{{v.username}}</td>
            <td>{{v.loginip}}</td>
        </tr>
    </table>
    <hr/>
    <table width="400" border="4">
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>LoginIP</td>
        </tr>
        <tr ng-repeat="v in data" ng-class-even="{red:true}" ng-class-odd="{green:true}">
            <td>{{v.user_id}}</td>
            <td >{{v.username}}</td>
            <td>{{v.loginip}}</td>
        </tr>
    </table>
    <hr/>
    颜色：<input type="text" ng-model="color"><br/>
    大小：<input type="text" ng-model="size"><br/>
    <span ng-style="{color:'red',fontSize:'32px'}">AngularJs</span>
    <span ng-style="{color:color,fontSize:size+'px'}">AngularJs</span>
    <hr/>
    <h1>事件处理机制</h1>
    <div ng-click="show()">ng-click单击事件</div><br/>
    ng-change单击事件:<input type="text" ng-change="change()" ng-model="title"><br/>
    ng-blur单击事件:<input type="text" ng-blur="blur()" ng-model="title"><h2>{{blur_data}}</h2><br/>

    <hr/>
</div>
<script>
    var m = angular.module('tinywan', []);
    m.controller('ctrl', ['$scope', function ($scope) {
        $scope.data = angular.fromJson('{$listData}');
        $scope.show = function () {
            alert('show');
        };
        $scope.change = function () {
            alert('change');
        };
        $scope.blur = function () {
            $scope.blur_data = 'blur event';
        };
//        console.log('{$listData}');
        console.log('{$listData}');
        console.log('{$username}');
    }]);
</script>
</body>
</html>